<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>excel-merge</title>
    <meta name="description" content="合并excel">
    <meta name="keywords" content="合并excel">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/orderset.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain" style="margin-top: 100px" align="center">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="download()">
                            模板下载
                        </el-button>
                        <el-input v-model="inputValue" type="number" style="width: 250px"
                                  placeholder="请输入excel表格标题所占行数"></el-input>
                        <el-upload
                                class="upload-demo"
                                drag
                                action="/excel/manualImport"
                                :data="uploadData"
                                name="excelFile"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                :before-upload="beforeUpload"
                                multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将excel拖到此处，或<em>点击上传</em></div>
                            <span class="el-upload__tip" slot="tip"><strong
                                    style="color: #dd6161">只支持xlsx格式</strong></span>
                        </el-upload>
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="autodown()">
                            数据导出
                        </el-button>
                    </div>
                    <div style="margin-top: 60px">
                        <pre>
                            <span style="color: #ff9115"><strong>（建议使用Firefox或者Chrome，有些浏览器可能会出现未知错误）：</strong></span>
                                <strong>
                                使用方法:
                                        你可以下载我提供的模板，进行数据导入合并。
                                        你也可以通过自己的excel表进行合并，如果你的excel中含有标题请输入
                                    标题所占的行数，没有则不输入。
                                        你可以选择多文件上传。
                                        当你需要合并的excel表上传完成，你只需点击数据导出，就会下载得到一张完成的excel表
                                </strong>



                            注意事项：
                                <span style="color: #99c2e6"><strong>
                                1. 如果你在使用期间关闭了浏览器，那你只能重新导入了。
                                2. 网站顶不住太高的并发量，请尽量在人少的时候访问和操作。(夜深人静的时候悄悄使用)
                                3. 如果你在使用上遇到什么问题你可以加我 qq 599502537，我会解决你的问题。
                                4. 如果你也是个developer or coder，你也可以加我qq一起学习。
                                5. 本网站提供免费服务，如果你觉得对你有所帮助你可以选择下方二维码捐赠一下作者。
                                </strong></span>
                        </pre>
                        <img src="img/weixin.png">
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="plugins/elementui/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fileList: [],
            id: "",
            inputValue: '',
            uploadData: {
                skipCount: ''
            },
            // hasCookie: false
        },
        created: function () {//在vue初始化时调用
            this.getId()
        },
        methods: {
            //获取唯一id
            getId() {
                axios.get("/excel/id").then(res => {
                    console.log(res.data)
                    if (res.data.flag) {
                        this.id = res.data.data
                        // this.hasCookie = true
                    }
                })
            },
            refreshId(callback, file) {
                axios.get("/excel/refreshId").then(res => {
                    console.log(res.data)
                    if (res.data.flag) {
                        this.id = res.data.data
                        this.hasCookie = true
                        return callback(file)
                    }
                    return false
                }).catch(() => {
                    return false
                })
            },
            //文件上传个数多于limit触发的函数
            /*outOfLimit(fileList) {
                this.$message({
                    type: "error",
                    message: "最多只能上传200个文件, 当前文件个数: " + fileList.length,
                    duration: 6000
                })
            },*/
            checkFile(file) {
                this.uploadData.skipCount = this.inputValue === '' ? 0 : this.inputValue;
                //上传之前对文件格式进行判断
                if (file.type != undefined && file.type != "") {
                    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        this.$message({
                            type: 'info',
                            message: '正在上传...'
                        });
                        return true;
                    }
                    this.$message.error('上传文件只能是xlsx格式!');
                    return false;
                } else {
                    //获取不到type
                    //获取文件名
                    let name = file.name;
                    let start = name.lastIndexOf(".");
                    //得到后缀名
                    let extension = name.substr(start + 1);
                    //如果后缀名不符合规定
                    if (extension !== "xlsx") {
                        this.$message.error('上传文件只能是xlsx格式!');
                        return false;
                    } else {
                        //后缀名符合规定
                        this.$message({
                            type: 'info',
                            message: '正在上传...'
                        });
                        return true;
                    }
                }
            },
            //上传之前进行文件格式校验
            beforeUpload(file) {
                /*if (this.hasCookie) {
                    alert('有cookie')
                    return this.checkFile(file)
                } else {
                    alert('没有cookie')
                    return this.refreshId(this.checkFile, file)
                }*/
                return this.checkFile(file)
            },
            download() {
                window.location.href = "/excel/getTemplate";
            },
            autodown() {
                // this.hasCookie = false
                // window.location.href = "/excel/autodownload1"
                window.location.href = "/excel/manualDownload"
            },
            //上传成功提示
            handleSuccess(response) {
                console.log(response)
                if (response.flag) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: response.message,
                        duration: 5000
                    });
                }
            },

            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        }
    })
</script>
</html>